<script src="https://fastly.jsdelivr.net/npm/three@0.145.0"></script>
<script src="https://fastly.jsdelivr.net/npm/three@0.145.0/examples/js/controls/OrbitControls.js"></script>

<body></body>
<style>
    body {
        margin: 0;
    }
</style>
<script>
    setTimeout(function () {

        var scene = new THREE.Scene();

        // 几何体1
        var geometry1 = new THREE.TorusKnotGeometry(40, 14, 100, 16);
        var mesh1 = new THREE.Mesh(geometry1, new THREE.MeshLambertMaterial({
            color: "red"
        }));
        scene.add(mesh1);

        mesh1.name = "红色";

        geometry1.translate(-50, 0, 0);

        // 几何体2
        var geometry2 = new THREE.BoxGeometry(200, 30, 30);
        var mesh2 = new THREE.Mesh(geometry2, new THREE.MeshLambertMaterial({
            color: "green"
        }));
        scene.add(mesh2);

        mesh2.name = "绿色";

        // 几何体2
        var geometry3 = new THREE.BoxGeometry(70, 70, 70);
        var mesh3 = new THREE.Mesh(geometry3, new THREE.MeshLambertMaterial({
            color: "blue"
        }));
        scene.add(mesh3);

        mesh3.name = "蓝色";

        geometry3.translate(50, 40, 0)

        var point = new THREE.PointLight("white");
        point.position.set(400, 200, 300);
        scene.add(point);

        var ambient = new THREE.AmbientLight("green");
        scene.add(ambient);

        var width = window.innerWidth;
        var height = window.innerHeight;
        var k = width / height;
        var s = 100;

        var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);

        camera.position.set(200, 300, 200);
        camera.lookAt(scene.position);

        var renderer = new THREE.WebGLRenderer();

        renderer.setSize(width, height);
        renderer.setClearColor(0xb9d3ff, 1);
        document.body.appendChild(renderer.domElement);

        function render() {
            renderer.render(scene, camera);
        }

        render();

        var controls = new THREE.OrbitControls(camera, renderer.domElement);
        controls.addEventListener('change', render);

        // 射线投射器，可基于鼠标点和相机，在世界坐标系内建立一条射线，用于选中模型
        var raycaster = new THREE.Raycaster();

        //鼠标在裁剪空间中的点位
        var pointer = new THREE.Vector2();

        document.body.addEventListener("dblclick", function (event) {
            var x = event.clientX, y = event.clientY;

            // 鼠标的canvas坐标转裁剪坐标
            // 其实就是把鼠标位置转成webgl坐标
            pointer.set((x / window.innerWidth) * 2 - 1, -(y / window.innerHeight) * 2 + 1);

            // 基于鼠标点的裁剪坐标位和相机设置射线投射器
            raycaster.setFromCamera(pointer, camera);

            // 选择
            var intersect = raycaster.intersectObjects([mesh1, mesh2, mesh3])[0];

            if (intersect) {
                alert("点击的物体颜色：" + intersect.object.name);
            }

        });

    }, 200);
</script>